<!--
author: 何其沆(pooky)
desc: ReceivedPayment
date: 2021-11-12
-->
<template>
  <div class="received-payment">
    <e-container class="container">
      <div class="button-area">
        <a-button type="default" class="button" @click="handleExport">
          <e-icon type="excel" color="green" font-size="16px" style="cursor: pointer" />
          <span style="margin-left: 8px; padding-top: 4px; color: #252526">Export Excel</span>
        </a-button>
      </div>
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)">
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
      </a-spin>
      <!--      <div v-if="total > 0" class="pagination">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageSize"
          :total="total"
          show-less-items
          :show-size-changer="false"
          @change="changeSize" />
      </div>-->
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import EIcon from '@/components/EIcon.vue'
import EEmpty from '@/components/EEmpty.vue'
import pageColumns from '@/assets/script/page_columns.js'
import p from '@/api/performance.js'
import Util from '@/utils'

const route = useRoute()
const receivedPayment = pageColumns.receivedPayment
const columns = reactive(receivedPayment)
const loading = ref(false)

const data = ref([])
// const current = ref(1)
// const pageSize = ref(10)
// const total = ref(2)
/**
 * 获取数据列表
 * @returns {Promise<void>}
 */
const getList = () => {
  loading.value = true
  p.getAdminReceivedPayment({
    PaymentNum: route.query.paymentNum,
    EmpID: route.query.employee
  })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 切换页码
 * @param cur
 */
// const changeSize = cur => {
//   current.value = cur
//   getList()
// }
/**
 * 导出
 */
const handleExport = () => {
  p.exportAdminReceivedPayment({
    PaymentNum: route.query.paymentNum,
    EmpID: route.query.employee
  }).then(res => {
    Util.downloadBlob(res, 'Received-Payment.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
  })
}
/**
 * 初始化
 */
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
.button-area {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10px;
  .button {
    display: flex;
    align-items: center;
  }
}
</style>
